<template>
	<div>
		<div class="flex u-margin-top-22">
			<div v-for="(item,index) in list" :key="index" class="flex" :style="{opacity:index+1==item.type?'1':item.status==2?'0.7':''}">
				<div style="position: relative;top: 20px">
					<i v-if="index!==0 " :style="{color:item.status==0?'#F56C6C':''}"
						class="el-icon-d-arrow-right u-margin-right-20 u-margin-left-20"></i>
				</div>
				<div>
					<div class="flex flex-col-center">
						<div class="StepBlcok text-center"
							:style="{color:defindColor(item,index).tc,background:'url('+defindColor(item,index).bg+')'}">
							{{item.title}}
						</div>
					</div>
					<div :style="{color:defindColor(item,index).tc,background:'url('+defindColor(item,index).bgB+')'}"
						style="width: 202px;height: 420px;
					padding: 20px;background-repeat: no-repeat;
					margin-top: 30px;
					background-size: cover;">
						<slot name="detail" :item="item"></slot>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'baseStep',
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			defindColor(item, index) {

				return {
					bgB: index + 1 == item.type ? item.status == 1 ? require('@/assets/images/block_bottom_blue.png') :
						item.status == 2 ? require('@/assets/images/block_bottom_green.png') : '' : require(
							'@/assets/images/block_bottom_blue.png'),
					bg: index + 1 == item.type ? item.status == 1 ? require('@/assets/images/block_top_blue.png') :
						item.status == 2 ? require('@/assets/images/block_top_green.png') : '' : require(
							'@/assets/images/block_top_blue.png'),
					// bg:index+1==item.type?'#298DFF':item.status==0?'#F56C6C':item.status==1?'#67C23A':item.status==2?'#F2F2F2':'',
					tc: index + 1 == item.type ? '#fff' : item.status == 2 ? '#fff' : ''
				}
			}
		}
	}
</script>

<style scoped>
	.StepBlcok {
		text-align: center;
		width: 230px;
		height: 80px;
		line-height: 80px;
		/* background: #67C23A;
		border-radius: 4px 4px 4px 4px;
		padding:0 20px;
		text-align: center;
		color: #fff;
		line-height: 60px;
		font-size: 15px; */
	}
</style>
